<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>红绿灯倒计时</title>
		<link rel="stylesheet" href="red.css" />
	</head>
	<body>
		<div class="box">
			<!--红灯-->
			<div id="r"></div>
			<!--黄灯-->
			<div id="y"></div>
			<!--绿灯-->
			<div id="g"></div>
			<!--倒计时-->
			<div id="count" class="count"></div>
		</div>
		<script>
			/* 1、设置红黄绿灯、倒计时对象
			   2、设置绿灯亮时初始化页面
			   3、实现红绿灯倒计时*/
			  //考虑3个灯的背景颜色
			var lamp={
			red:{
				obj:document.getElementById('r'),
				timeout:30,
				style:['red','gray','gray'],
				next:'green'
			},
			yellow:{
				obj:document.getElementById('y'),
				timeout:5,
				style:['gray','yellow','gray'],
				next:'red'
			},
			green:{
				obj:document.getElementById('g'),
				timeout:35,
				style:['gray','gray','green'],
				next:'yellow'
			},
			changeStyle(style){
				this.red.obj.className=style[0];
				this.yellow.obj.className=style[1];
				this.green.obj.className=style[2];
			}
		};
		var count={
			obj:document.getElementById('count'),
			change:function(num){
				this.obj.innerHTML=(num<10?'0'+num:num);
			}
		};
		var now=lamp.green;
		var timeout=now.timeout;
		lamp.changeStyle(now.style);
		count.change(timeout);
		/*setInterval(function(){
			if(--timeout<=0){
				now=lamp[now.next];
				timeout=now.timeout;
				lamp.changeStyle(now.style);
			}
			count.change(timeout);
		},1000);*/
		setInterval(myfun,1000);
		function myfun(){
			if(timeout--<0){
				now=lamp[now.next];
				timeout=now.timeout;
				lamp.changeStyle(now.style);
			}
			count.change(timeout);
		}
		</script>		
	</body>
</html>
